<template>
  <div class="app-container home">
    <query-panel
      :form-data="queryParams"
      @handleQuery="handleQuery"
      label-width="100px"
    >
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="流水编号：" prop="serialnumberCode">
            <el-input
              v-model="queryParams.serialnumberCode"
              placeholder="请输入"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="流水名称：" prop="serialnumberName">
            <el-input
              v-model="queryParams.serialnumberName"
              placeholder="请输入"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="循环周期：" prop="periodType">
            <el-input v-model="queryParams.periodType" placeholder="请输入" />
          </el-form-item>
        </el-col>
      </el-row>
    </query-panel>
    <table-panel
      ref="tablePanel"
      align="left"
      table-data="/maintain/maintain/serialnumber/list"
      :queryParams="queryParams"
      :columns="columns"
      :operateArray="operateArray"
      @onOperate="onOperate"
    >
      <template slot="tableTop">
        <el-button
          class="tableAdd"
          type="primary"
          plain
          size="mini"
          @click="handleAdd"
          ><svg-icon icon-class="add_icon" style="width: 18px; height: 16px" />
          新增</el-button
        >
      </template>
      <template #periodType="{ row }">
        <dict-tag
          :options="dict.type.sys_serialnumber_period_type"
          :value="row.periodType"
        />
      </template>
    </table-panel>
    <el-dialog
      :title="title"
      :visible.sync="dialogShow"
      width="458px"
      :class="showState == '!' ? 'hou' : ''"
    >
      <el-form
        ref="addInformation"
        :model="addInfo"
        label-width="155px"
        label-position="left"
        size="mini"
      >
        <el-form-item label="流水号规则编号：">
          <el-input
            v-model="addInfo.serialnumberCode"
            placeholder="请输入流水号规则编号"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item
          label="流水号规则名称："
          :rules="{
            required: true,
            message: '流水号规则名称不能为空！',
            trigger: 'change',
          }"
          prop="serialnumberName"
        >
          <el-input
            v-model="addInfo.serialnumberName"
            placeholder="请输入流水号规则名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="流水号循环周期：">
          <el-select
            v-model="addInfo.periodType"
            placeholder="请选择流水号循环周期"
            style="width: 100%"
          >
            <el-option
              v-for="dict in dict.type.sys_serialnumber_period_type"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          size="mini"
          class="tableAdd"
          @click="handleSave"
          >保存</el-button
        >
        <el-button
          class="dialogCancel"
          type="primary"
          size="mini"
          @click="handleClose"
          >返回</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import TablePanel from "@/components/TablePanel/index.vue";
import QueryPanel from "@/components/QueryPanel/index.vue";
import {
  addSerial,
  deleteSerial,
  editSerial,
} from "@/api/systemManage/runningWaterCoding/serialNumberSet.js";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
  name: "serialNumberSetIndex",
  components: {
    TablePanel,
    QueryPanel,
  },
  dicts: ["sys_serialnumber_period_type"],
  data() {
    return {
      queryParams: {
        serialnumberCode: "",
        serialnumberName: "",
        periodType: "",
      },
      operateArray: [
        {
          name: "编辑",
          icon: "table-column-edit",
        },
        {
          name: "删除",
          icon: "table-column-delete",
        },
      ],
      columns: [
        {
          field: "serialnumberCode",
          label: "流水编号",
        },
        {
          field: "serialnumberName",
          label: "流水名称",
        },
        {
          field: "periodType",
          label: "循环周期",
          slots: { default: "periodType" },
        },
        {
          field: "source",
          label: "取值来源",
        },
        {
          label: "操作",
          width: "200px",
        },
      ],
      dialogShow: false,
      title: "新增流水号设置",
      addInfo: {
        serialnumberCode: "",
        serialnumberName: "",
        periodType: "",
      },
      showState: '',
      cycleData: [
        {
          label: "年",
          id: 1,
        },
        {
          label: "月",
          id: 2,
        },
        {
          label: "日",
          id: 3,
        },
      ],
    };
  },

  methods: {
    // 查询
    handleQuery() {
      this.$refs.tablePanel.getTable();
    },
    handleAdd() {
      this.dialogShow = true;
      this.addInfo.serialnumberId = '';
      this.addInfo = {
        serialnumberCode: "",
        serialnumberName: "",
        periodType: "",
      };
      this.title = "新增流水号设置";
    },
    onOperate(type, row) {
      if (type === "删除") {
        this.$confirm("确认删除吗？").then(() => {
          deleteSerial(row.serialnumberId)
            .then((res) => {
              this.$refs.tablePanel.getTable();
              this.$message.success("操作成功！");
            })
            .catch((err) => {
              this.$message.error("操作失败！");
            });
        });
      } else {
        this.title = "编辑流水号设置";
        this.dialogShow = true;
        for (let d in this.addInfo) {
          this.addInfo[d] = row[d];
        }
        this.addInfo.serialnumberId = row.serialnumberId;
      }
    },
    handleSave() {
      const api = this.title === "新增流水号设置" ? addSerial : editSerial;
      this.$refs.addInformation.validate((valid) => {
        if (valid) {
          const params = this.addInfo;
          api(params)
            .then((res) => {
              this.$message.success("操作成功！");
              this.$refs.tablePanel.getTable();
              this.dialogShow = false;
            })
            .catch((err) => {
              this.$message.error("操作失败！");
            });
        } else {
          return false;
        }
      });
    },
    handleClose() {
      this.dialogShow = false;
    },
  },
  created() {
    this.showState = sessionStorage.getItem('showState')
    console.log(this.showState);
  }
};
</script>

<style scoped lang="scss">
.hou {
  ::v-deep .el-form .el-form-item__label,
  ::v-deep .dialog-footer .el-button span {
    color: #000 !important;
  }
}
::v-deep .el-dialog__body {
  .el-input {
    width: 100%;
  }
}
</style>
